<template>
  <div class="index">
    <head-text titleText="单品销售统计"></head-text>
    <div class="list-content">
      <div>
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
      </div>
      <!-- 内容区 -->
      <div>
        <!-- echart图表 -->
        <echart-com :echartFrom="echartFrom"></echart-com>
        <!-- 表格 -->
        <table-com :tableFrom="tableFrom"></table-com>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@c/search";
import Cookie from "@u/cookie";
import headText from "@c/headText";
import echartCom from "./echartCom";
import tableCom from "./tableCom";
import { FLOORARR } from "@u/wordbook";
import { getProductSelectApi } from "@s/api";
export default {
  name: "index",
  data() {
    return {
      tableFrom: "",
      echartFrom: "",
      dataTime: "",
      prouductSelect: [],
      floorArr: FLOORARR,
      isHaveFoor:
        JSON.parse(localStorage.getItem("mb_userInfo")).venueFloor == 0
          ? ""
          : JSON.parse(localStorage.getItem("mb_userInfo")).venueFloor,
      searchItem: [],
      searchData: {
        orderType: "2", // 特许
        venueFloor: "",
        categoryId: "",
        startDate: "",
        endDate: "",
        i: ""
      }
    };
  },
  created() {
    this.searchItem = [
      {
        type: "daterange",
        label: "取货日期：",
        timeFormat: "yyyy-MM-dd",
        timeList: ["startDate", "endDate"]
      },
      {
        type: "select",
        label: "商品分类：",
        prop: "categoryId",
        placeholder: "请选择商品分类",
        selectList: this.prouductSelect
      },
      {
        type: "select",
        label: "楼层：",
        prop: "venueFloor",
        placeholder: "请选择楼层",
        selectList: this.floorArr
      }
    ];
  },
  methods: {
    // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.getList();
    },
    getList() {
      if (this.isHaveFoor) {
        this.searchData.venueFloor = JSON.parse(
          Cookie.get("mb_userInfo")
        ).venueFloor;
      }
      this.searchData.i = Math.random();
      this.tableFrom = JSON.stringify(this.searchData);
      this.echartFrom = JSON.stringify(this.searchData);
    },
    productSelect() {
      var json = {
        categoryType: 2 // 2 特许
      };
      getProductSelectApi(json).then(res => {
        let newCategoryList = [];
        res.forEach(item => {
          var newItem = {
            id: item.id,
            value: item.categoryName
          };
          newCategoryList.push(newItem);
        });
        this.prouductSelect = newCategoryList;
        this.searchItem.forEach(item => {
          if (item.prop == "categoryId") {
            item.selectList = this.prouductSelect;
          }
        });
      });
    }
  },
  mounted() {
    this.productSelect();
    this.getList();
  },
  components: {
    headText,
    echartCom,
    tableCom,
    Search
  }
};
</script>
<style scoped lang="scss"></style>
